<template>
  <el-card class="introduce">
    <div class="order">

      <el-card class="order-item" @click="orderList('today')">
        <template #header>
          <div class="card-header">
            <span>订单 </span>
          </div>
        </template>
        <div class="num">{{ todayOrderNum }}</div>
        <div class="name">今日订单数</div>
      </el-card>

      <el-card class="order-item" @click="orderList('today')">
        <template #header>
          <div class="card-header">
            <span>交易</span>
          </div>
        </template>
        <div class="num">{{ todayOrderAmount }}<span class="numb"> / 元</span></div>
        <div class="name">今日订单金额</div>
      </el-card>

      <el-card class="order-item" @click="orderList('yesterday')">
        <template #header>
          <div class="card-header">
            <span>订单</span>
          </div>
        </template>
        <div class="num">{{ yesOrderNum }}</div>
        <div class="name">昨日订单数</div>
      </el-card>
      <el-card class="order-item" @click="orderList('yesterday')">
        <template #header>
          <div class="card-header">
            <span>交易</span>
          </div>
        </template>
        <div class="num">{{ yesOrderAmount }}<span class="numb"> / 元</span></div>
        <div class="name">昨日订单金额</div>
      </el-card>
    </div>

    <div class="order">

      <el-card class="order-item" @click="merchantRechargeBalanceList('today')">
        <template #header>
          <div class="card-header">
            <span>当前余额 </span>
          </div>
        </template>
        <div class="num">{{ myBalancePrice }}<span class="numb"> / 元</span></div>
        <el-button type="primary" plain >去充值</el-button>
      </el-card>

      <el-card class="order-item">
      </el-card>

      <el-card class="order-item">
      </el-card>

      <el-card class="order-item">
      </el-card>
    </div>

  </el-card>

</template>

<script setup>

import { reportInfo } from "@/api/business/report";
// import { getMyMerchantRechargeBalance } from "@/api/business/merchantCapital";
import { getMyMerchantBalance } from "@/api/business/merchantCapital";

const todayOrderNum = ref('0')
const todayOrderAmount = ref('0')
const yesOrderNum = ref('0')
const yesOrderAmount = ref('0')
const myBalancePrice = ref(0);
const router = useRouter();


getList();
getMyMerchantRechargeInfo();

function getList() {
  reportInfo().then(response => {

    todayOrderNum.value = response.todayOrderNum;
    todayOrderAmount.value = response.todayOrderAmount;
    yesOrderNum.value = response.yesOrderNum;
    yesOrderAmount.value = response.yesOrderAmount;
  });
}

function orderList(menuCode){

  router.push({
    path: '/business/order',
    query:
        {
          menuCode: menuCode
        }
  });
}

function merchantRechargeBalanceList(menuCode){

  router.push({
    path: '/finance/merchantRechargeBalance',
    query:
        {
        }
  });
}


function getMyMerchantRechargeInfo() {

  getMyMerchantBalance().then(response => {
    myBalancePrice.value = response.data;
  });
}


</script>

<style lang="scss" scoped>
.introduce .order {
  display: flex;
  margin-bottom: 50px;
}
.introduce .order .order-item {
  flex: 1;
  margin-right: 20px;
  cursor: pointer;

  .card-header{
    font-size: 18px;
    font-weight: bold;
  }

  .num{
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: bold;
  }
  .numb{
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
  }
}
.introduce .order .order-item:last-child{
  margin-right: 0;
}
#zoom {
  min-height: 300px;
}
</style>

